<template>
  <div class="forget-password-container">
    <h2>找回密码</h2>
    <div class="forget-password-form">
      <div class="input-group">
        <el-input
          v-model="form.email"
          placeholder="请输入您的注册邮箱"
          prefix-icon="el-icon-email">
        </el-input>
      </div>

      <!-- 添加同意条款复选框 -->
      <div class="agreement">
        <el-checkbox v-model="agreement">
          我已阅读并同意
          <a href="#" @click.prevent="showTerms('用户协议')">《用户协议》</a>、
          <a href="#" @click.prevent="showTerms('隐私政策')">《隐私政策》</a>
          等。
        </el-checkbox>
      </div>

      <el-button type="primary" class="forget-button" @click="sendResetEmail">发送重置链接</el-button>
      <div class="options">
        <a href="#" @click.prevent="goToLogin">返回登录</a>
      </div>
    </div>

    <!-- 显示验证码输入框 -->
    <el-dialog
      title="输入验证码"
      :visible.sync="showCaptchaDialog"
      width="300px">
      <div>
        <el-input
          v-model="form.captcha"
          placeholder="请输入验证码"
          prefix-icon="el-icon-lock">
        </el-input>
        <p>实际验证码：<strong>{{ actualCaptcha }}</strong></p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showCaptchaDialog = false">取消</el-button>
        <el-button type="primary" @click="handleCaptchaInput">确认</el-button>
      </span>
    </el-dialog>

    <!-- 显示账号密码 -->
    <el-dialog
      title="您的账号信息"
      :visible.sync="showAccountInfoDialog"
      width="400px">
      <div>
        <p><strong>账号:</strong> {{ accountInfo.username }}</p> <!-- 修改为 username -->
        <p><strong>密码:</strong> {{ accountInfo.password }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAccountInfoDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ForgetPassword',
  data() {
    return {
      form: {
        email: "",
        captcha: "", // 用户输入的验证码
      },
      agreement: false, // 同意条款状态
      showCaptchaDialog: false, // 控制验证码弹窗显示
      showAccountInfoDialog: false, // 控制账号信息弹窗显示
      actualCaptcha: "", // 后端返回的实际验证码
      accountInfo: {
        username: "", // 用户名
        password: "", // 账号密码
      },
      userInfo: {}  // 新增属性，用于存储用户信息
    };
  },
  methods: {
    // 发送重置链接
    sendResetEmail() {
      // 检查是否同意条款
      if (!this.agreement) {
        this.$message({
          message: '请阅读并同意用户协议和隐私政策',
          type: 'warning'
        });
        return;
      }

      // 验证邮箱格式
      const emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (!this.form.email || !emailReg.test(this.form.email)) {
        this.$message.error('请输入正确的邮箱地址');
        return;
      }

      let url = `/user/forget-password/${this.form.email}`; // 将 email 放入 URL 路径中
      this.$http.post(url).then(res => {
        if (res.data.code === 1) {
          // 后端返回验证码
          this.actualCaptcha = res.data.data.code; // 获取实际验证码
          this.userInfo = res.data.data; // 保存用户信息
          this.$message({
            message: '验证码已发送，请输入验证码',
            type: 'success'
          });
          this.showCaptchaDialog = true; // 显示验证码输入框
        } else {
          // 发送失败
          this.$alert(res.data.msg || '发送失败，请稍后重试');
        }
      }).catch(err => {
        console.error('请求失败:', err);
        this.$alert('网络错误，请稍后重试');
      });
    },

    // 处理用户输入的验证码
    handleCaptchaInput() {
      // 验证输入的验证码
      if (this.form.captcha !== this.actualCaptcha) {
        this.$message.error('验证码错误，请重新输入');
        return;
      }

      // 验证码正确，展示账号和密码
      this.accountInfo.username = this.userInfo.username; // 从 userInfo 中获取用户名
      this.accountInfo.password = this.userInfo.password; // 从 userInfo 中获取密码
      this.accountInfo.head = this.userInfo.head; // 从 userInfo 中获取头像 URL
      this.showAccountInfoDialog = true; // 弹出账号密码
      this.showCaptchaDialog = false; // 隐藏验证码输入框
    },

    // 返回登录页面
    goToLogin() {
      this.$router.push('/login');
    },

    // 显示用户协议或隐私政策
    showTerms(type) {
      this.$alert(`这里是${type}的详细内容`, type, {
        confirmButtonText: '我已阅读并同意',
        callback: action => {
          if (action === 'confirm') {
            this.agreement = true;
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.forget-password-container {
  width: 400px;
  margin: 50px auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.input-group {
  margin-bottom: 20px;
}

.agreement {
  margin: 15px 0;
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
}

.agreement a {
  color: #409EFF;
  text-decoration: none;
}

.agreement a:hover {
  text-decoration: underline;
}

.forget-button {
  width: 100%;
  margin-top: 10px;
  padding: 12px 0;
  font-size: 16px;
}

.options {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 14px;
}

.options a {
  color: #409EFF;
  text-decoration: none;
}

.options a:hover {
  text-decoration: underline;
}
</style>
